﻿@{
    Uri url = new Uri(Request.Url.AbsoluteUri);
    ViewBag.Server = url.GetLeftPart(UriPartial.Authority);
}


<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
    <div id="portraitsdiv" class="portraits k-content">
        <h2>Portrait Orders are closed for this term.</h2>
        <p>
            You may, though, download a high quality image of your children's portraits here. 
        </p>
        <div id="portraitOrders">
        </div>

    </div>

    <script type="text/x-kendo-tmpl" id="myportraits-template">
        <div class="portraitgroup">
            <div class="portraitcontent">

                <div class="pic">
                    <img src="/images/Students/#:StudentID#.jpg" style="width:" />
                </div>
                <div class="links">
                        <p>Click here to download a large file of this picture suitable for printing.

                            <a  href="/downloads/portraits/#:StudentID#.jpg" download="Large-#:StudentID#.jpg">
                                Large #:StudentID#.jpg
                            </a>
                        </p>
                        <p>Click here to download a smaller file of this picture suitable for websites, email and social media.
                            <a href="/images/Students/#:StudentID#.jpg" download="Small-#:StudentID#.jpg">
                                Small #:StudentID#.jpg
                            </a>
                        </p>
                </div>
                
                
                </div>
            </div>
    </script>

    <script>
        $(document).ready(function () {
            var currenturl = "@ViewBag.Server";
            var crudServiceBaseUrl = currenturl + "/api/";
            
            var ordersModel = kendo.observable({
               portraitOrdersSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "",
                            dataType: "json"
                        }
                    }
                   
                })
            });

            ordersModel.portraitOrdersSource.transport.options.read.url = crudServiceBaseUrl + "alltables/MyPortraitOrders?Where=ParentID=" + viewModel.get("currentPersonID");
            ordersModel.portraitOrdersSource.read();

            var listView = $("#portraitOrders").kendoListView({
                dataSource: ordersModel.portraitOrdersSource,
                template: kendo.template($("#myportraits-template").html())
             }).data("kendoListView");

            
            kendo.bind($("#portraitsdiv"), ordersModel);
        });
    </script>


    <style>
        /*.portraitgroup {
                position: relative;
                top:0;
                display:block;
                width: 80%;
                left: 10%;
                height:200px;
            }

            .portraitgroup > .pic {
                float: left;
            }

            .portraitgroup > dl {
                 position: relative;
                 width: 100%;
            }

            .portraitgroup > dl > dt {
                position: relative;
                width:30%;
                float: left;
                margin-right: 10%;
                text-align: right;
            }

            .portraitgroup > dl > dd {
                position: relative;
                width:60%;
                margin: 0;
            }
            .portraitgroup > dl > dd .k-numerictextbox {
                max-width: 40%;
                width: 40%;
            }

            .portraitgroup .edit-buttons {

                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                text-align: right;
                padding: 5px;
                background-color: rgba(0,0,0,0.1);
            }*/
        .portraitgroup {
            position: relative;
            display: block;
            width: 80%;
            left: 10%;
            max-width: 600px;
        }

            .portraitgroup:before {
                padding: 0;
                margin: 0;
                border: 0;
                content: "";
                display: block;
                padding-top: 50%;
            }

        .portraitcontent {
            padding: 0;
            margin: 0;
            border: 0;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .portraitgroup .pic {
            position: relative;
            float: left;
            width: 30%;
            max-width: 200px;
            z-index: 1;
        }

        .pic img {
            position: relative;
            width: 100%;
        }

        .links {
            position: relative;
            float:left;
            width: 50%;
            margin-left: 5%;
        }


        .portraitgroup .k-numerictextbox {
            max-width: 40%;
            width: 40%;
        }

        .portraitgroup .edit-buttons {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: right;
            padding: 5px;
            background-color: rgba(0,0,0,0.1);
        }

        span.k-invalid-msg {
            position: absolute;
            margin-left: 6px;
        }

        .portraits {
            width: 90%;
            left: 5%;
        }


        @@media only screen and (max-width : 620px) {

            .portraitgroup {
                width: 100%;
                left: 0;
                font-size: smaller;
            }

                .portraitgroup > dl > dt {
                    margin-right: 5%;
                }
        }
    </style>


</body>

</html>